<script setup lang="ts" name="LoveTalk">
import { nanoid } from 'nanoid'
import { useLoveTalkStore } from '@/store/loveTalk.ts'
import { storeToRefs } from 'pinia'

// 获取到pinia的 LoveTalkStore
const loveTalkStore = useLoveTalkStore()
// storeToRefs只会关注store中的数据，不会关注方法进行ref的包裹
const { talkList } = storeToRefs(loveTalkStore)

// 以下两种方式都可以拿到state中的数据
console.log('@@@', loveTalkStore.talkList)
console.log('@@@', loveTalkStore.$state.talkList)

// 数据
// let talkList = reactive([
//   {
//     id: nanoid(),
//     title: '今天你有点怪，哪里怪？怪好看的！',
//   },
//   {
//     id: nanoid(),
//     title: '草莓、蓝莓、蔓越莓，今天想我了没?',
//   },
//   {
//     id: nanoid(),
//     title: '心里给你留了一块地，我的死心塌地！',
//   },
// ])

// 方法
async function getLoveTalk() {
  // let talk = await axios.get('https://v1.hitokoto.cn/?c=f&encode=json')
  // return talkList.push({
  //   id: nanoid(),
  //   title: talk.data.hitokoto,
  // })

  // 解构赋值。发请求，下面这行的写法是：连续结构赋值+重命名
  // let {
  //   data: { hitokoto: title },
  // } = await axios.get('https://v1.hitokoto.cn/?c=f&encode=json')
  // // 把请求回来的字符串，包装成一个对象
  // return LoveTalkStore.talkList.push({
  //   id: nanoid(),
  //   // title: title,
  //   title,
  // })

  // 使用actions的方式
  return loveTalkStore.getATalk()
}
</script>

<template>
  <div class="talk">
    <button @click="getLoveTalk()">获取一段土味情话</button>
    <ul>
      <!-- <li v-for="talk of loveTalkStore.talkList" :key="talk.id">
        {{ talk.title }}
      </li>-->

      <li v-for="talk of talkList" :key="talk.id">
        {{ talk.title }}
      </li>
    </ul>
  </div>
</template>

<style scoped>
.talk {
  background-color: #dab649;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
</style>
